<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<style>
		body {
			background: #EFEFEF;
		}

		.procate {
			width: 700px;
			height: 300px;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			/* 实现居中的效果 */
			margin: 0 auto;
			background: #fff;
			padding: 0.2rem 0;
			border-radius: 15px;
		}

		.procate .procate-item {
			width: 20%;
			text-align: center;
		}

		.procate .procate-item .navigation {
			font-size: 18px;
			color: black;
			text-decoration: none;
			font-weight: 600;
			width: 100%;
			height: 100%;
		}

		.menu {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			background: #F7F9FA;
			box-sizing: border-box;
		}
		
		.menu .menu-item{
			margin-top: 10px;
			min-width: 25%;
			text-align: center;
		}
		
		.menu .menu-item p{
			font-size: 20px;
			margin-top: -2px;
		}
	</style>
	<body>
		<nav class="procate">
			<div class="procate-item">
				<a href="/flower/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_flowers.png" alt="鲜花">
					<p>鲜花</p>
				</a>
			</div>
			<div class="procate-item">
				<a href="/yongshenghua/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_forever.png" alt="永生花">
					<p>永生花</p>
				</a>
			</div>
			<div class="procate-item">
				<a href="/cake/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_cakes.png" alt="蛋糕">
					<p>蛋糕</p>
				</a>
			</div>
			<div class="procate-item">
				<a href="/gifts/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_gifts.png" alt="礼品">
					<p>礼品</p>
				</a>
			</div>
			<div class="procate-item">
				<a href="/gifts/chocolates/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_chocolate.png" alt="巧克力">
					<p>巧克力</p>
				</a>
			</div>
			<div class="procate-item small">
				<a href="/shengrixianhua/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_birthday_1224.png" alt="生日祝福">
					<p>生日祝福</p>
				</a>
			</div>
			<div class="procate-item small">
				<a href="/biaobaiqiuhunxianhua/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_express_1224.png" alt="表白求婚">
					<p>表白求婚</p>
				</a>
			</div>
			<div class="procate-item small">
				<a href="/businessFlower/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_business_1224.png" alt="商务开业">
					<p>商务开业</p>
				</a>
			</div>
			<div class="procate-item small">
				<a href="/zhounianjinianxianhua/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_anniversary_1224.png" alt="周年纪念">
					<p>周年纪念</p>
				</a>
			</div>
			<div class="procate-item small">
				<a href="/qiyetuangou/" class="navigation">
					<img src="https://img02.hua.com/wx_imgs/home_group_1224.png" alt="企业团购">
					<p>企业团购</p>
				</a>
			</div>
		</nav>

		<div class="menu">
			<div class="menu-item">
				<img src="../src/首页.png">
				<p>首页</p>
			</div>
			<div class="menu-item">
				<img src="../src/分类.png">
				<p>分类</p>
			</div>
			<div class="menu-item">
				<img src="../src/购物车.png">
				<p>购物车</p>
			</div>
			<div class="menu-item">
				<img src="../src/我的.png">
				<p>我的</p>
			</div>
		</div>
	</body>
</html>
